<template>
  <view>
    <view class="user_info">
      <view class="user_icon" v-if="imgDetail.user.avatar">
        <image :src="imgDetail.user.avatar" mode="widthFix"></image>
      </view>
      <view class="user_desc">
        <view class="user_name">{{imgDetail.user.name}}</view>
        <view class="user_time">{{imgDetail.cnTime}}</view>
      </view>
    </view>
    <view class="high_img">
      <swiper-action @swiperAction="handleSwiperAction">
        <image :src="imgDetail.newThumb" mode="widthFix"></image>
      </swiper-action>
    </view>
    <view class="user_rank">
      <view class="rank">
        <text class="iconfont icon-zansel"> {{imgDetail.rank}}</text>
      </view>
      <view class="collect">
        <text class="iconfont icon-shoucang-chanpinxiangqing"> 收藏</text>
      </view>
    </view>
    <view class="album_wrap" v-if="album.length>0">
      <view class="title">相关</view>
      <view class="content">
        <view class="item" v-for="item in album" :key="item.id">
          <view class="cover">
            <image :src="item.cover" mode="aspectFill"></image>
          </view>
          <view class="info">
            <view class="info_text">专辑</view>
            <view class="info_name">{{item.name}}</view>
            <view class="iconfont"></view>
          </view>
        </view>
      </view>
    </view>
    <view class="comment hot" v-if="hot.length>0">
      <view class="comment_title">
        <text class="iconfont icon-hot1"><text>最热评论</text></text>
      </view>
      <view class="comment_list">
        <view class="comment_item" v-for="item in hot" :key="item.id">
          <view class="user">
            <view class="icon">
              <image :src="item.user.avatar" mode="widthFix"></image>
            </view>
            <view class="name">
              <view class="nikename">{{item.user.name}}</view>
              <view class="time">{{item.cnTime}}</view>
            </view>
            <view class="badge">
              <image v-for="item2 in item.user.title" :key="item2.icon" :src="item2.icon"></image>
            </view>
          </view>
          <view class="desc">
            <view class="content">{{item.content}}</view>
            <view class="like">
              <text class="iconfont icon-zansel">{{item.size}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="comment new" v-if="comment.length>0">
      <view class="comment_title">
        <text class="iconfont icon-pinglun">
          <text>最新评论</text>
        </text>
      </view>
      <view class="comment_list">
        <view class="comment_item" v-for="item in comment" :key="item.id">
          <view class="user">
            <view class="icon">
              <image :src="item.user.avatar" mode="widthFix"></image>
            </view>
            <view class="name">
              <view class="nikename">{{item.user.name}}</view>
              <view class="time">{{item.cnTime}}</view>
            </view>
            <view class="badge">
              <image v-for="item2 in item.user.title" :key="item2.icon" :src="item2.icon"></image>
            </view>
          </view>
          <view class="desc">
            <view class="content">{{item.content}}</view>
            <view class="like">
              <text class="iconfont icon-zansel">{{item.size}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="download">
      <view class="btn" @click="handleDownload">下载图片</view>
    </view>
  </view>
</template>

<script>
import moment from 'moment'
import swiperAction from '@/components/swiperAction'
moment.locale("zh-cn")
  export default {
    data() {
      return {
        imgDetail:{},
        album:[],
        hot:[],
        comment:[],
        imgIndex:0
      }
    },
    components:{
      swiperAction
    },
    onLoad(){
      //console.log(getApp().globalData);
      const {imgIndex}=getApp().globalData
      this.imgIndex=imgIndex
      this.getData()
    },
    methods: {
      getData(){
        const {imgList}=getApp().globalData
        this.imgDetail=imgList[this.imgIndex]
        //this.imgDetail.newThumb=this.imgDetail.thumb+this.imgDetail.rule.replace('$<Height>',360)
        this.imgDetail.newThumb=this.imgDetail.thumb
        this.imgDetail.cnTime=moment(this.imgDetail.atime*1000).fromNow()
        //console.log(this.imgDetail)
        this.getComments(this.imgDetail.id)
      },
      getComments(id){
        this.request({
          url:`http://157.122.54.189:9088/image/v2/wallpaper/wallpaper/${id}/comment`
        }).then(res=>{
          console.log(res);
          this.album=res.res.album
          //hot添加时间
          res.res.hot.forEach(v=>v.cnTime=moment(v.atime*1000).fromNow())
          res.res.comment.forEach(v=>v.cnTime=moment(v.atime*1000).fromNow())
          this.hot=res.res.hot
          this.comment=res.res.comment
        })
      },
      handleSwiperAction(e){
        if (e.direction==='left'&&this.imgIndex<this.imgDetail.length-1) {
          this.imgIndex++
          this.getData()
        }else if (e.direction==='right'&&this.imgIndex>0) {
          this.imgIndex--
          this.getData()
        }else{
          uni.showToast({
            title:"没有数据了",
            icon:"none"
          })
        }
      },
      async handleDownload(){
        await uni.showLoading({title:"下载中"})
        const res =await uni.downloadFile({url:this.imgDetail.img})
        const {tempFilePath} = res[1]
        const res1=await uni.saveImageToPhotosAlbum({
          filePath:tempFilePath
        })
        uni.hideLoading()
        await uni.showToast({title:"下载成功"})
      }
    },
  }
</script>

<style lang="scss" scoped>
.user_info {
  display: flex;
  align-items: center;
  padding: 20rpx;
  .user_icon {
    padding: 0 20rpx;
    width: 88rpx;
    border-radius: 50%;
  }
  .user_desc {
    .user_name {
      color: #000;
      font-weight: 600;
    }
    .user_time {
      font-size: 24rpx;
      padding: 10rpx 0;
      color: #ccc;
    }
  }
}
.user_rank{
  display: flex;
  height: 80rpx;
  border-bottom: 5rpx solid #eee;
  .rank{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text{
      padding: 5rpx;
    }
  }
  .collect{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text{
      padding: 5rpx;
    }
  }
}
.album_wrap {
  padding: 20rpx;
  .title {
    padding: 10rpx 0;
  }

  .content {
    .item {
      display: flex;
      padding: 10rpx 0;
      .cover {
        flex: 1;
        image {
          width: 180rpx;
          height: 180rpx;
        }
      }

      .info {
        flex: 3;
        padding-left: 20rpx;
        position: relative;
        .info_text {
          width: 100rpx;
          height: 50rpx;
          background-color: $color;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .info_name {
          padding: 10rpx 0;
        }
        .iconfont{
          font-size: 40rpx;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 10%;
          color: #000;
        }
      }
    }
  }
}
.comment {
  .comment_title {
    padding: 15rpx;
    font-size: 28rpx;
    color: #666;
    .iconfont {
      color: red;
      font-size: 40rpx;
      text{
        font-size: 28rpx;
        margin-left: 5rpx;
      }
    }
  }

  .comment_list {
    .comment_item {
      border-bottom: 15rpx solid #eee;
      .user {
        display: flex;
        padding: 20rpx 0;
        .icon {
          width: 15%;
          display: flex;
          justify-content: center;
          align-items: center;
          image {
            width: 90%;
          }
        }

        .name {
          flex: 1;
          .nikename {
            color: #777;
          }

          .time {
            color: #ccc;
            padding: 5rpx;
            font-size: 24rpx;
          }
        }

        .badge {
          display: flex;
          image {
            width: 40rpx;
            height: 40rpx;
          }
        }
      }

      .desc {
        display: flex;
        padding: 30rpx 0;
        .content {
          flex: 1;
          padding-left: 15%;
          color: #000;
        }

        .like {
          text-align: right;
          .iconfont {

          }
        }
      }
    }
  }
}
.new{
  .icon-pinglun{
    color: aqua !important;
  }
}
.download{
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  .btn{
    width: 90%;
    height: 80%;
    background-color: $color;
    color: #fff;
    font-weight: 600;
    font-size: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>